<template>
	<div class="branch-wrap">
		<div class="branch-box-wrap">
			<div class="branch-box">
				<button class="add-branch" @click="addTerm">添加条件</button>
				<div
					class="col-box"
					v-for="(item, index) in nodeConfig.conditionNodes"
					:key="index"
				>
					<div class="condition-node">
						<div class="condition-node-box">
							<div
								class="auto-judge"
								:class="isTried && item.error ? 'error active' : ''"
							>
								<div
									class="sort-left"
									v-if="index != 0"
									@click="arrTransfer(index, -1)"
								>
									<i class="el-icon-arrow-left" />
								</div>
								<div class="title-wrapper">
									<input
										type="text"
										class="editable-title-input"
										v-if="isInputList[index]"
										@blur="blurEvent(index)"
										@focus="$event.currentTarget.select()"
										v-focus
										v-model="item.nodeName"
									/>
									<span
										class="editable-title"
										@click="clickEvent(index)"
										v-if="!isInputList[index]"
										>{{ item.nodeName }}</span
									>
									<span
										class="priority-title"
										@click="setPerson(item.priorityLevel)"
									>
										优先级{{ item.priorityLevel }}
									</span>
									<i class="el-icon-delete close" @click="delTerm(index)" />
								</div>
								<div
									class="sort-right"
									v-if="index != nodeConfig.conditionNodes.length - 1"
									@click="arrTransfer(index)"
								>
									<i class="el-icon-arrow-right" />
								</div>
								<div
									class="content"
									@click="setPerson(item.priorityLevel)"
									:title="conditionStr(nodeConfig, index)"
								>
									{{ conditionStr(nodeConfig, index) }}
								</div>
								<div class="error_tip" v-if="isTried && item.error">
									<i class="el-icon-warning" style="color: rgb(242, 86, 67);"></i>
								</div>
							</div>
							<add-node :childNodeP.sync="item.childNode"></add-node>
						</div>
					</div>
					<node-wrap
						v-if="item.childNode && item.childNode"
						:nodeConfig.sync="item.childNode"
						:isTried.sync="isTried"
					/>
					<div class="top-left-cover-line" v-if="index == 0" />
					<div class="bottom-left-cover-line" v-if="index == 0" />
					<div
						class="top-right-cover-line"
						v-if="index == nodeConfig.conditionNodes.length - 1"
					/>
					<div
						class="bottom-right-cover-line"
						v-if="index == nodeConfig.conditionNodes.length - 1"
					/>
				</div>
			</div>
			<add-node :childNodeP.sync="nodeConfig.childNode" />
		</div>
	</div>
</template>
<script>
import AddNode from "./add-node";
import NodeWrap from "./node-wrap";
import funcMixin from "./func.js";
export default {
	mixins: [funcMixin],
	components: {
		AddNode,
		NodeWrap
	},
	props: {
		nodeConfig: {
			type: Object,
			default: () => ({})
		},
		flowPermission: {
			type: Array,
			default: () => []
		},
		isTried: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			placeholderList: ["发起人", "审核人", "抄送人"],
			isInputList: [],
			isInput: false
		};
	},
	methods: {
		clickEvent(index) {
			if (index || index === 0) {
				this.$set(this.isInputList, index, true);
			} else {
				this.isInput = true;
			}
		},
		blurEvent(index) {
			if (index || index === 0) {
				this.$set(this.isInputList, index, false);
				this.nodeConfig.conditionNodes[index].nodeName = this.nodeConfig.conditionNodes[
					index
				].nodeName
					? this.nodeConfig.conditionNodes[index].nodeName
					: "条件";
			} else {
				this.isInput = false;
				this.nodeConfig.nodeName = this.nodeConfig.nodeName
					? this.nodeConfig.nodeName
					: this.placeholderList[this.nodeConfig.type];
			}
		},
		// 节点删除
		delNode() {
			this.$emit("update:nodeConfig", this.nodeConfig.childNode);
		},
		addTerm() {
			let len = this.nodeConfig.conditionNodes.length + 1;
			this.nodeConfig.conditionNodes.push({
				nodeName: "条件" + len,
				type: 3,
				priorityLevel: len,
				conditionList: [],
				nodeUserList: [],
				childNode: null
			});
			for (var i = 0; i < this.nodeConfig.conditionNodes.length; i++) {
				this.nodeConfig.conditionNodes[i].error =
					this.conditionStr(this.nodeConfig, i) == "请设置条件" &&
					i != this.nodeConfig.conditionNodes.length - 1;
			}
			this.$emit("update:nodeConfig", this.nodeConfig);
		},
		delTerm(index) {
			this.nodeConfig.conditionNodes.splice(index, 1);
			this.nodeConfig.conditionNodes.map((item, index) => {
				item.priorityLevel = index + 1;
				item.nodeName = `条件${index + 1}`;
			});
			for (var i = 0; i < this.nodeConfig.conditionNodes.length; i++) {
				this.nodeConfig.conditionNodes[i].error =
					this.conditionStr(this.nodeConfig, i) == "请设置条件" &&
					i != this.nodeConfig.conditionNodes.length - 1;
			}
			this.$emit("update:nodeConfig", this.nodeConfig);
			if (this.nodeConfig.conditionNodes.length == 1) {
				if (this.nodeConfig.childNode) {
					if (this.nodeConfig.conditionNodes[0].childNode) {
						this.reData(
							this.nodeConfig.conditionNodes[0].childNode,
							this.nodeConfig.childNode
						);
					} else {
						this.nodeConfig.conditionNodes[0].childNode = this.nodeConfig.childNode;
					}
				}
				this.$emit("update:nodeConfig", this.nodeConfig.conditionNodes[0].childNode);
			}
		},
		// 重置childNode
		reData(data, addData) {
			if (!data.childNode) {
				data.childNode = addData;
			} else {
				this.reData(data.childNode, addData);
			}
		},
		setPerson(priorityLevel) {
			var { type, settype } = this.nodeConfig;
			if (type == 0) {
				// this.$store.commit("updatePromoter", true);
				// this.$store.commit("updateFlowPermission", {
				// 	value: this.flowPermission,
				// 	flag: false,
				// 	id: this._uid
				// });
			} else if (type == 1) {
				this.$store.commit("updateApprover", true);
				this.$store.commit("updateApproverConfig", {
					value: {
						...JSON.parse(JSON.stringify(this.nodeConfig)),
						settype: settype ? settype : 1
					},
					flag: false,
					id: this._uid
				});
			} else if (type == 2) {
				this.$store.commit("updateCopyer", true);
				this.$store.commit("updateCopyerConfig", {
					value: JSON.parse(JSON.stringify(this.nodeConfig)),
					flag: false,
					id: this._uid
				});
			} else {
				this.$store.commit("updateCondition", true);
				this.$store.commit("updateConditionsConfig", {
					value: JSON.parse(JSON.stringify(this.nodeConfig)),
					priorityLevel,
					flag: false,
					id: this._uid
				});
			}
		},
		arrTransfer(index, type = 1) {
			//向左-1,向右1
			this.nodeConfig.conditionNodes[index] = this.nodeConfig.conditionNodes.splice(
				index + type,
				1,
				this.nodeConfig.conditionNodes[index]
			)[0];
			this.nodeConfig.conditionNodes.map((item, index) => {
				item.priorityLevel = index + 1;
			});
			for (var i = 0; i < this.nodeConfig.conditionNodes.length; i++) {
				this.nodeConfig.conditionNodes[i].error = this.conditionHasErr(this.nodeConfig, i);
				// this.conditionStr(this.nodeConfig, i) == "请设置条件" &&
				// i != this.nodeConfig.conditionNodes.length - 1;
			}
			this.$emit("update:nodeConfig", this.nodeConfig);
		}
	}
};
</script>
